<a style="display: none" id="lnk2" href="#sign-up-2-form" class="modal-opener">here</a>

<form method="post" id="sign-up-2-form" class="sky-form sky-form-modal"
      action="<?php echo Yii::app()->request->baseUrl; ?>/index.php?r=register/step2"
      style="width: 600px">
    <header>Technical Data</header>

    <fieldset>
        <div class="row">
            <section class="col col-3">
                <label class="select">
                    <select name="position">
                        <option value="" disabled selected>Position</option>
                        <option value="Goalkeeper">Goalkeeper</option>
                        <option value="Left Wing">Left Wing</option>
                        <option value="Left Back">Left Back</option>
                        <option value="Center Back">Center Back</option>
                        <option value="Right Back">Right Back</option>
                        <option value="Right Wing">Right Wing</option>
                        <option value="Pivot">Pivot</option>
                    </select>
                    <i></i>
                </label>
            </section>
            <section class="col col-3">
                <label class="input">
                    <i class="icon-append icon-pencil"></i>
                    <input type="text" name="height" placeholder="H(m)">
                </label>
            </section>
            <section class="col col-3">
                <label class="input">
                    <i class="icon-append icon-pencil"></i>
                    <input type="text" name="weight" placeholder="W(kg)">
                </label>
            </section>
            <section class="col col-3">
                <label class="select">
                    <select name="hand">
                        <option value="" selected disabled>Hand</option>
                        <option value="Left">Left</option>
                        <option value="Right">Right</option>
                        <option value="Both">Both</option>
                    </select>
                    <i></i>
                </label>
            </section>
        </div>

        <div class="row">
            <section class="col col-3">
                <label class="select">
                    <select name="league">
                        <option value="" disabled selected>Current League</option>
                        <option value="1st Division">1st Division</option>
                        <option value="2nd Division">2nd Division</option>
                        <option value="3rd Division">3rd Division</option>
                        <option value="4th Division">4th Division</option>
                        <option value="5th Division">5th Division</option>
                    </select>
                    <i></i>
                </label>
            </section>

            <section class="col col-6">
                <label class="select">
                    <select name="status">
                        <option value="" selected disabled>Sport Status</option>
                        <option value="PA">Professional Athlete (PA)</option>
                        <option value="SA">Semi-professional Athlete (SA)</option>
                        <option value="AA">Amateur Athlete (AA)</option>
                    </select>
                    <i></i>
                </label>
            </section>

            <section class="col col-3">
                <label class="select">
                    <select name="national">
                        <option value="" disabled selected>National Team</option>
                        <option value="Senior">Senior</option>
                        <option value="Junior">Junior</option>
                        <option value="Youth">Youth</option>
                        <option value="N/A">N/A</option>
                    </select>
                    <i></i>
                </label>
            </section>
        </div>
        <section>
            <label class="label">Current Status</label>

            <div class="inline-group">
                <label class="radio"><input type="radio"
                                            onchange="if(this.checked){$('#availability1').attr('checked', true);$('#divPrevious').hide();} else {$('#availability1').removeAttr('checked');$('#divPrevious').show();}"
                                            name="available" value="Available" id="available1" checked><i></i>Available</label>
                <label class="radio"><input type="radio"
                                            onchange="if(this.checked){$('#availability2').attr('checked', true);$('#divPrevious').show();} else {$('#availability2').removeAttr('checked');$('#divPrevious').hide();}"
                                            name="available" value="Under contract" id="available2"><i></i>Under
                    contract</label>
            </div>
        </section>
        <section>
            <label class="label">Availability</label>

            <div class="inline-group">
                <label class="radio"><input type="radio"
                                            onchange="if(this.checked){$('#available1').attr('checked', true);$('#divPrevious').hide();} else {$('#available1').removeAttr('checked');$('#divPrevious').show();}"
                                            onclick="$('#divPrevious').hide();" value="Available" name="availability"
                                            id="availability1"
                                            checked><i></i>Available</label>
                <label class="radio"><input type="radio"
                                            onchange="if(this.checked){$('#available2').attr('checked', true);$('#divPrevious').show();} else {$('#available2').removeAttr('checked');$('#divPrevious').hide();}"
                                            onclick="$('#divPrevious').show();" value="Under contract"
                                            name="availability"
                                            id="availability2"><i></i>Contract expiration month and year</label>
            </div>
        </section>
        <div class="row" id="divPrevious" style="display: none">
            <section class="col col-3">
                <label class="select">
                    <select name="aMonth">
                        <option value="" selected disabled>Month</option>
                        <option value="01">Jan</option>
                        <option value="02">Feb</option>
                        <option value="03">Mar</option>
                        <option value="04">Apr</option>
                        <option value="05">May</option>
                        <option value="06">Jun</option>
                        <option value="07">Jul</option>
                        <option value="08">Aug</option>
                        <option value="09">Sep</option>
                        <option value="10">Oct</option>
                        <option value="11">Nov</option>
                        <option value="12">Dec</option>
                    </select>
                    <i></i>
                </label>
            </section>
            <section class="col col-3">
                <label class="select">
                    <select name="aYear">
                        <option value="" selected disabled>Year</option>
                        <option value="2013">2013</option>
                        <option value="2014">2014</option>
                        <option value="2015">2015</option>
                        <option value="2016">2016</option>
                        <option value="2017">2017</option>
                        <option value="2018">2018</option>
                    </select>
                    <i></i>
                </label>
            </section>
            <section class="col col-3">
                <label class="label">
                    <a href="#current-teams-form" class="modal-opener">Add details</a></label>
            </section>
        </div>
        <section>
            <label class="label">
                <a href="#previous-teams-form" class="modal-opener">View previous teams</a></label>
        </section>
        <section>
            <label class="label">Career Achievements</label>
            <label class="textarea">
                <i class="icon-append icon-comment"></i>
                <textarea rows="4" name="achievements" id="achievements"></textarea>
            </label>
        </section>
    </fieldset>

    <footer>
        <button type="submit" class="button">Next Step</button>
    </footer>
</form>
<script type="text/javascript">
    $(function () {
        // Date pickers
        $('#cStart').datepicker({
            dateFormat:'dd/mm/yy',
            prevText:'<i class="icon-chevron-left"></i>',
            nextText:'<i class="icon-chevron-right"></i>',
            onSelect:function (selectedDate) {
            }
        });

        $('#start').datepicker({
            dateFormat:'dd/mm/yy',
            prevText:'<i class="icon-chevron-left"></i>',
            nextText:'<i class="icon-chevron-right"></i>',
            onSelect:function (selectedDate) {
            }
        });

        $('#end').datepicker({
            dateFormat:'dd/mm/yy',
            prevText:'<i class="icon-chevron-left"></i>',
            nextText:'<i class="icon-chevron-right"></i>',
            onSelect:function (selectedDate) {
            }
        });

        // Validation
        $("#sign-up-2-form").validate(
                {
                    // Rules for form validation
                    rules:{
                        height:{
                            required:true
                        },
                        weight:{
                            required:true
                        },
                        hand:{
                            required:true
                        },
                        position:{
                            required:true
                        },
                        status:{
                            required:true
                        }
                    },

                    // Messages for form validation
                    messages:{
                        height:{
                            required:'Required'
                        },
                        weight:{
                            required:'Required'
                        },
                        hand:{
                            required:'Required'
                        },
                        position:{
                            required:'Required'
                        },
                        status:{
                            required:'Required'
                        }
                    },

                    // Ajax form submit
                    submitHandler:function (form) {
                        $(form).ajaxSubmit(
                                {
                                    beforeSend:function () {
                                        $('#sign-up-2-form button[type="submit"]').addClass('button-processing').attr('disabled', true);
                                    },
                                    success:function () {
                                        $('#sign-up-2-form').fadeOut();
                                        $('#sky-form-modal-overlay').fadeOut();
                                        $('#lnk3').click();

                                        $('#sign-up-2-form button[type="submit"]').removeClass('button-processing').removeAttr('disabled');
                                    }
                                });
                    },

                    // Do not change code below
                    errorPlacement:function (error, element) {
                        error.insertAfter(element.parent());
                    }
                });
    });
</script>